<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>设置登录密码</title>
    <!-- zui -->
    <link rel="stylesheet" type="text/css" href="../css/normalize.css">
    <link rel="stylesheet" type="text/css" href="../css/zui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/doc.min.css">
    <style type="text/css">
    	body{background: #f3f3f3}
    	header{background: #ef673c;color: #fff}
    	h2{margin: 0;padding: .5em 0;}
    	.icon-arrow-left{font-size: inherit;}
    	.row{border-bottom: 1px solid #f3f3f3}
		.input-group{background: #fff;padding: .4em 0;width: 100%}
		.input-group-addon{background: transparent;border:0 none;color: #666}
		.form-control{border: 0 none;box-shadow: none;}
    	.form-control:focus{border-color:#ccc;box-shadow:none;}
		.icon-mobile{padding-right: 1em}
		.btn{width: 100%;border-radius: 0;border:0;background: #ef673c;color: #fff;padding: .5em 0}
		.btn:focus,.btn:active{border:0;background: #ef673c;color: #fff;box-shadow: none;}

		.form-control[readonly]{background: transparent;}
    </style>
</head>
<body class="hidden-md hidden-lg">
	<header class="clearfix">
		<div class="col-xs-2">
			<h2><i class="icon icon-arrow-left"></i></h2>
		</div>
		<div class="col-xs-8 text-center"><h2>设置登录密码</h2></div>
	</header>
	<div class="test">
		<div class="container">
			<div class="row">
				<div class="input-group">
					<input type="text" class="form-control" readonly="true" value="152*****970">
				</div>
			</div>
			<div class="row">
				<div class="input-group">
					<input type="text" class="form-control test-input" placeholder="请输入4位数验证码">
					<span class="input-group-addon"><i class="icon icon-mobile"></i><span>发送验证码</span></span>
				</div>
			</div>
			<div class="row" style="margin-top:15%">
				<button class="btn btn-block disabled " type="button">下一步</button>
			</div>
		</div>
	</div>
	<div class="set" style="display:none">
		<div class="container">
			<div class="row">
				<div class="input-group">
				  	<input type="password" class="form-control old-number" placeholder="输入密码">
				</div>
			</div>
			<div class="row">
				<div class="input-group">
				  	<input type="password" class="form-control old-number" placeholder="确认密码">
				</div>
			</div>
			<div class="row" style="margin-top:15%">
				<button class="btn btn-block disabled " type="button">保存</button>
			</div>
		</div>
			
	</div>
	<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('.test-input').bind('input propertychange',function(){
				if($(this).val() != ''){
					$('.test button').removeClass('disabled');
				}else{
					$('.test button').addClass('disabled');
				}
			})
			$('button').eq(0).click(function(){
				$('.test').hide();
				$('.set').show();
			})
			$('.set input[type="password"]').each(function(){
				$(this).bind('input propertychange',function(){
					if($('.set input[type="password"]').eq(0).val()!=''&&$('.set input[type="password"]').eq(1).val()!=''){
						$('.set button').removeClass('disabled');
					}else{

						$('.set button').addClass('disabled');
					}
				})
			})

			$('.set button').click(function(){
				if($('.set input[type="password"]').eq(0).val() == $('.set input[type="password"]').eq(1).val()){
					$('#new_land',parent.document).text('*****');
					$('.wrapper', parent.document).show();
					$('iframe', parent.document).hide();
				}else{
					alert('输入的两次密码不一致')
				}
			})
		})
	</script>

</body>
</html>